<template>
	<el-form :model="data" class="demo-form-inline">
		<el-form-item label="卖点标题">
			<el-input v-model="data.carldtitle" placeholder="卖点标题"></el-input>
		</el-form-item>
		<el-form-item label="卖点描述">
			<el-input v-model="data.carldtitles" placeholder="卖点描述"></el-input>
		</el-form-item>
		<el-form-item>
			<el-button type="danger" @click="deleteList">删除</el-button>
		</el-form-item>
		<el-row :gutter="20">
			<el-col :span="12">
				<div>
					<span class="demonstration pb20">卖点图片</span>
					<el-upload class="avatar-uploader" :action="`${api}/index.php/index/goods/aliuploadfile`"
						:show-file-list="false" :on-success="handleCarldimg">
						<img v-if="data.carldimg" :src="ifImgHeader(data.carldimg)" class="avatar" />
						<i v-else class="el-icon-plus avatar-uploader-icon"></i>
					</el-upload>
					<span>参考尺寸:960*960</span>
				</div>
			</el-col>

		</el-row>

	</el-form>
</template>

<script lang="ts">
	export default {
		props: ['data', "index"],
		data() {
			return {}

		},
		methods: {
			deleteList() {

				this.$emit('deleteList', this.index)
			},
			handleCarldimg(file) {
				this.$emit('handleCarldimg', {
					carldimg: file.data,
					index: this.index
				})
			},
			
			onSubmit() {
				console.log('submit!')
			},
		},
	}
</script>
<style type="text/css" scoped>
	.avatar-uploader-icon {
		font-size: 28px;
		color: #8c939d;
		width: 200px;

		text-align: center;
	}

	.avatar {
		width: 200px;

		display: block;
	}
</style>
